<template>
  <md-nav-bar title="我的收藏" backgroundColor="#ffffff" />
  <view class="favorite-container">
    <md-page-list :api="api.Music.likesList" @change="pageChange" ref="pageRefs">
      <view v-for="(item, idx) in data.list" :key="idx" class="favorite-item" @click="() => handleDetail(item)">
        <image class="favorite-img" :src="item.coverUrl" mode="aspectFill" />
        <view class="favorite-title">{{ item.musicName }}</view>
        <view class="favorite-del" @click.stop="onDel(item)">
          <image
            class="del-icon"
            src="https://cdn.xmxiaomai.com/isong_static/my/%E5%88%A0%E9%99%A4.png"
            mode="widthFix"></image>
        </view>
      </view>
    </md-page-list>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
// 接口
import api from '@/api';
import type { Music } from '@/api/data';
import { Toast } from '@/utils/util';

const data = reactive({
  list: [] as Music.LikesList.Data['list'],
});
const pageRefs = ref<any>(null);

// 跳转音乐详情
const handleDetail = (item: Music.LikesList.ListVo) => {
  // 跳转音乐详情
  if (item.musicId) {
    uni.navigateTo({
      url: '/pages/sub/square/musicDetail?id=' + item.musicId,
    });
  }
};

const pageChange = (list: Music.LikesList.Data['list']) => {
  data.list = list;
};

function onDel(item: Music.LikesList.ListVo) {
  uni.showModal({
    title: '提示',
    content: '是否取消收藏？',
    success: res => {
      if (res.confirm) {
        fetchHandleLike(item.musicId);
      }
    },
  });
}

/**
 * 接口相关
 */
// 点赞/取消点赞
const fetchHandleLike = async (musicId: number) => {
  try {
    await api.Music.handleLikes({
      id: musicId,
      isLike: false,
    });
    Toast('取消收藏成功');
    pageRefs.value?.onRefresh();
  } catch (e) {}
};
</script>

<style lang="scss" scoped>
.favorite-container {
  min-height: 100vh;
  background: #f5f8f7;
  padding: 0 0 32rpx 0;
  margin-top: 20rpx;
}
.favorite-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 0;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 24rpx 0 24rpx 24rpx;
  margin: 0;
  position: relative;
}
.favorite-img {
  width: 96rpx;
  height: 96rpx;
  border-radius: 16rpx;
  background: #eee;
  margin-right: 24rpx;
  flex-shrink: 0;
}
.favorite-title {
  flex: 1;
  font-size: 30rpx;
  color: #222;
  font-weight: 500;
  white-space: normal;
  word-break: break-all;
  margin-right: 67rpx;
}
.favorite-del {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf8f4;
  margin-right: 24rpx;
}
.del-icon {
  width: 46rpx;
  height: 46rpx;
}
</style>
